<template>
	<div class="login">
		<div class="container">
			<div class="tab">
				<div class="tab-item" :class="{ active: tab === 1 }" @click="changeTab(1)">录入</div>
				<div class="tab-item" :class="{ active: tab === 2 }" @click="changeTab(2)">查询</div>
			</div>
			<div class="form">
				<el-form :inline="true" :model="form" class="demo-form-inline">
					<el-form-item label="国家">
						<el-input v-model="form.country_name" placeholder="请输入国家名称" clearable style="width: 180px;" />
					<!-- 	<el-select v-model="form.country_name" placeholder="请选择国家名称" clearable style="width: 180px;">
							<el-option v-for="item in countryList" :key="item.id" :label="item.name" :value="item.id" />
						</el-select> -->
					</el-form-item>
					<el-form-item label="区号">
						<el-input v-model="form.area_code" placeholder="请输入国家区号" clearable style="width: 180px;" />
					<!-- 	<el-select v-model="form.area_code" placeholder="请选择具体国家区号" clearable style="width: 180px;">
							<el-option v-for="item in areaList" :key="item.id" :label="item.code" :value="item.id" />
						</el-select> -->
					</el-form-item>
					<el-form-item label="手机号">
						<el-input v-model="form.mobile" placeholder="请输入手机号码" clearable style="width: 180px;" />
					</el-form-item>
				</el-form>
				<div class="button">
					<el-button @click="onReset">重置</el-button>
					<el-button type="primary" @click="onSubmit" v-if="tab == 1">录入</el-button>
					<el-button type="primary" @click="onQuery" v-if="tab == 2">查询</el-button>
				</div>
			</div>
			<div class="table">
				<el-table v-loading="loading" :data="tableData" style="width: 100%;min-height: 600px;"
					:row-style="{height:'55px'}">
					<el-table-column prop="id" label="序号" align="center" />
					<el-table-column prop="country_name" label="国家" align="center" />
					<el-table-column prop="area_code" label="区号" align="center" />
					<el-table-column prop="mobile" label="手机号" width="180" align="center" />
					<el-table-column prop="createtime" label="录入时间" align="center" />
				</el-table>
				<div class="page">
					<el-pagination v-model:current-page="page.pageNo" v-model:page-size="page.pageSize"
						:page-sizes="[10, 20, 30, 40]" :background="true" prev-text="< 上一页" next-text="下一页 >"
						layout="sizes, prev, pager, next" :total="page.total" @size-change="changePageSize"
						@current-change="changePage" />
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted
	} from 'vue'
	import {
		getAreaCodeAPI,
		getCountryAPI,
		addUserAPI,
		getUserAPI
	} from '@/api/index'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'

	const form = reactive({
		country_name: '',
		area_code: '',
		mobile: ''
	})
	const tab = ref(1)

	const changeTab = (e) => {
		tab.value = e
		onReset()
	}

	onMounted(() => {
		getAreaCode()
		getCountry()
		getTableData()
	})

	const areaList = ref([]) // 区域列表
	const countryList = ref([]) // 国家列表

	const getAreaCode = async () => {
		const res = await getAreaCodeAPI()
		areaList.value = res.data
	}
	const getCountry = async () => {
		const res = await getCountryAPI()
		countryList.value = res.data
	}

	const tableData = ref([])

	// 获取表格数据
	const loading = ref(false)
	const getTableData = async () => {
		const query = {
			area_code: form.area_code,
			country_name: form.country_name,
			mobile: form.mobile,
			page: page.pageNo,
			per_page: page.pageSize
		}
		loading.value = true
		const res = await getUserAPI(query)
		tableData.value = res.data.data
		page.pageNo = res.data.current_page
		page.pageSize = Number(res.data.per_page)
		page.total = res.data.total
		loading.value = false
	}

	// 重置
	const onReset = () => {
		form.country_name = ''
		form.area_code = ''
		form.mobile = ''
		if (tab == 2) getTableData()
	}

	//查询
	const onQuery = () => {
		page.pageNo = 1
		getTableData()
	}

	// 录入
	const onSubmit = () => {
		if (form.country_name === '' || form.area_code === '' || form.mobile === '') {
			ElMessage.error('请填写完整信息')
			return
		}
		const data = {
			country_name: form.country_name,
			area_code: form.area_code,
			mobile: form.mobile.replace(/\s+/g, '')
		}
		addUserAPI(data).then(res => {
			if (res.code == 1) {
				ElMessage.success('录入成功')
				form.mobile = ''
				getTableData()
			} else {
				ElMessageBox.alert('录入提示', '此号码已录入', {
					confirmButtonText: '确定',
					 type: 'error'
				});
			}
		})
	}

	// 分页
	const page = reactive({
		pageNo: 1,
		pageSize: 10,
		total: 0
	})

	//  切换页码
	const changePage = (e) => {
		page.pageNo = e
		getTableData()
	}

	// 切换每页的查询里亮
	const changePageSize = (pageSize) => {
		page.pageNo = 1
		page.pageSize = pageSize
		getTableData()
	}
</script>

<style lang="scss" scoped>
	.login {
		width: 100%;
		height: 100vh;
		background: url('@/assets/background.png') no-repeat;
		background-size: cover;
		display: flex;
		justify-content: center;
		align-items: center;

		.container {
			width: 80vw;

			.tab {
				width: 100%;
				display: flex;

				&-item {
					width: 50%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-bottom: 5px;
					color: #fff;
					font-size: 28px;
					cursor: pointer;

					&.active::after {
						content: '';
						display: block;
						width: 50px;
						height: 5px;
						background: #fff;
						border-radius: 4px;
						margin-top: 10px;
					}
				}
			}

			.form {
				width: 100%;
				padding: 3vh 2vw 1vh;
				background: #fff;
				border-radius: 12px;
				margin-top: 20px;
				display: flex;
				justify-content: space-between;
			}

			.table {
				width: 100%;
				height: 71vh;
				padding: 3vh 2vw 1vh;
				margin-top: 10px;
				overflow-y: scroll;
				background: #fff;
				box-shadow: 0px 12px 37px 0px rgba(0, 0, 0, 0.03);
				border-radius: 12px;
			}
		}

		.page {
			width: 100%;
			display: flex;
			justify-content: center;
			margin-top: 10px;
		}
	}
</style>